<!DOCTYPE html>
<!-- saved from url=(0038)#5 -->
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>AUI文档-附加</title>
		<style type="text/css">
			hr {
				border: 1px solid #ddd !important;
			}
			
			* {
				font-family: "微软雅黑";
			}
			
			.sidebar .sidebar-body ul li a:hover {
				color: #03A9F4;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			.cf {
				padding: 0;
			}
			
			.doc-head {
				position: relative;
				flex: none;
				order: 1;
			}
			
			.doc-head .toolbar .title {
				color: #333;
				font-size: 16px;
				line-height: 55px;
				font-weight: 700;
			}
			
			.doc-head .toolbar {
				display: flex;
				height: 55px;
				padding: 0 .8em;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: stretch;
				border-bottom: 1px solid #ddd;
			}
			
			.doc-body {
				flex: auto;
				width: 100%;
				overflow: hidden;
				position: fixed;
				height: 100%;
				z-index: 9;
			}
			
			.doc-body .sidebar {
				left: 0;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 280px;
				height: 100%;
				border-right: 1px solid #ddd;
				background-color: #fafafa;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				overflow-y: scroll;
				z-index: 8;
			}
			
			.doc-body .sidebar .sidebar-body {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				overflow-y: scroll;
				padding-bottom: 80px;
				flex: auto;
				position: relative;
			}
			
			.doc-body .sidebar .sidebar-body>ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			.sidebar .sidebar-body ul li {
				line-height: 36px;
				cursor: pointer;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				padding: 0 15px;
				font-size: 13px;
			}
			
			.sidebar .sidebar-body ul li.active {
				background: #e5e5e5;
			}
			
			.sidebar .sidebar-body ul li>a {
				display: block;
				width: 100%;
			}
			
			.sidebar .sidebar-body ul li a {
				color: #333;
			}
			
			.article1 {
				flex: auto;
				width: 100%;
				overflow: hidden;
				position: absolute;
				left: 300px;
				height: 100%;
				padding-bottom: 55px;
				overflow-y: scroll;
				padding-right: 200px;
				transition: left .25s ease;
			}
			
			.article1 .article1-body {
				width: 100%;
				padding: 0 20px;
			}
		</style>
		<link rel="icon" href="images/ico-logo.png" type="image/x-icon">
		<link rel="shortcut icon" href="images/ico-logo.png">
		<link rel="Bookmark" href="images/ico-logo.png">
		<!--样式文件-->
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bty.css" />
	</head>

	<body>
		<div class="cf">
			<div class="doc-head">
				<div class="toolbar">
					<a class="title" href="">AUI文档-附加</a>
				</div>
			</div>

			<div class="doc-body">
				<div class="sidebar">
					<div class="sidebar-body">
						<ul>
							<li class=""> <a href="#0"><i class="aui-iconfont aui-icon-flag"></i> 页面-头脚</a> </li>
							<li> <a href="#1"><i class="aui-iconfont aui-icon-flag"></i>“我的”页面-订单状态</a> </li>
							<li> <a href="#2"><i class="aui-iconfont aui-icon-flag"></i>“我的”页面-用户操作面板</a> </li>
							<li> <a href="#3"><i class="aui-iconfont aui-icon-flag"></i>组件：新页面入口（条状入口）<br/>1）含按钮（充值列表）<br/>2）含箭头图标</a> </li>
							<li> <a href="#4"><i class="aui-iconfont aui-icon-flag"></i> 页面下方弹出层按钮</a> </li>
							<li> <a href="#5"><i class="aui-iconfont aui-icon-flag"></i>列表：地址列表</a> </li>
							<li> <a href="#6"><i class="aui-iconfont aui-icon-flag"></i>列表：我的收藏</a> </li>
							<li> <a href="#7"><i class="aui-iconfont aui-icon-flag"></i>列表：平台消息</a> </li>
							<li> <a href="#8"><i class="aui-iconfont aui-icon-flag"></i>列表：我的关注</a> </li>
							<li> <a href="#9"><i class="aui-iconfont aui-icon-flag"></i>个人设置-头像设置</a> </li>
							<li> <a href="#10"><i class="aui-iconfont aui-icon-flag"></i> 订单列表</a> </li>
							<li> <a href="#11"><i class="aui-iconfont aui-icon-flag"></i> 意见反馈输入框（字数限制）</a> </li>
							<li> <a href="#12"><i class="aui-iconfont aui-icon-flag"></i> 列表-全部删除 </a> </li>
							<li> <a href="#13"><i class="aui-iconfont aui-icon-flag"></i> 购物车商品列表-全部删除 </a> </li>
							<li> <a href="#14"><i class="aui-iconfont aui-icon-flag"></i> 购物车列表 </a> </li>
							<li> <a href="#15"><i class="aui-iconfont aui-icon-flag"></i> 首页搜索商品列表 </a> </li>
							<li> <a href="#16"><i class="aui-iconfont aui-icon-flag"></i> 二级搜索页面 </a> </li>
						</ul>
					</div>
				</div>

				<div class="article1">
					<div class="article1-body container" style="margin-bottom:350px;">
						<div id="0" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;"> 页面-头脚</h3>
							<div class="">
								<!-- html结构如下 -->
								<h4 style="margin: 10px;margin-top: 20px;"> 1）页面-头部</h4> html结构如下：
								<br />
								<!--start:header头部-->
								<div class="aui-font-size-12">
									&lt;header id="bty_header" class="aui-bar aui-bar-nav"&gt;
									<br />&nbsp;&lt;a onclick="javascript:history.back(-1);" class="aui-pull-left aui-btn"&gt;
									<br />&nbsp;&nbsp;&lt;span class="aui-iconfont aui-icon-left"&gt;&lt;/span&gt;
									<br />&nbsp;&lt; /a &gt;
									<br />&nbsp; &lt;div class="aui-title"&gt;我的账户&lt;/div&gt;
									<br />&nbsp;&lt;a class="aui-pull-right"&gt;编辑&lt;/a&gt;
									<br />&lt;/header&gt;
									<br />&lt;div id="bty_hoder_header"&gt;&lt;/div&gt&lt;!--用于占位--&gt;
									<br /><br />
									<h4>与此段js配合使用：</h4>
									<div>bty_hoder_header.style.height = bty_header.offsetHeight+'px';</div>
								</div>

								<h4 style="margin: 10px;margin-top: 20px;"> 2）页面-脚部</h4> html结构如下：
								<br />
								<div class="aui-font-size-12">
									&lt;footer class="aui-bar aui-bar-tab bg-white" id="footer"&gt;
									<br/>&nbsp;&lt;a href="index.html" class="aui-bar-tab-item" tapmode&gt;
									<br/>&nbsp;&nbsp;&nbsp;&lt;i class="aui-iconfont aui-icon-home"&gt;&lt;/i&gt;
									<br/>&nbsp;&nbsp;&nbsp;&lt;div class="aui-bar-tab-label"&gt;商城&lt;/div&gt;
									<br/>&lt;/a&gt;
									<br />&lt;a href="" class="aui-bar-tab-item" tapmode&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="aui-iconfont aui-icon-video"&gt;&lt;/i&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="aui-bar-tab-label"&gt;直播&lt;/div&gt;
									<br />&lt;/a&gt;
									<br />&lt;a href="" class="aui-bar-tab-item" tapmode&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="aui-iconfont aui-icon-cart"&gt;&lt;/i&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="aui-bar-tab-label"&gt;购物车&lt;/div&gt;
									<nr></nr>&lt;/a&gt;
									<br />&lt;a href="my.html" class="aui-bar-tab-item aui-active" tapmode&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="aui-iconfont aui-icon-my"&gt;&lt;/i&gt;
									<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="aui-bar-tab-label"&gt;我的&lt;/div&gt;
									<br />&lt;/a&gt;
									<br />&lt;/footer&gt;
									<br />&lt;div id="footer_holder"&gt;&lt;/div&gt;&lt;!--用于占位--&gt;
									<br /><br />
									<h4>与此段js配合使用：</h4>
									<div>footer_holder.style.height = footer.offsetHeight+10+'px';<br />footer_holder.style.backgroundColor = 'transparent';</div>
								</div>
							</div>
						</div>
						<hr />

						<div id="1" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">“我的”页面-订单状态</h3>
							<div class="" style="width: 430px;">
								<!-- html结构如下 -->
								<div class="shop-status bg-white aui-margin-b-15 clearfix width-percent">
									<a href="" class="aui-col-5 text-center aui-padded-15">
										<i class="aui-iconfont aui-icon-cart aui-font-size-18"></i>
										<p class="aui-font-size-12">待付款</p>
									</a>
									<a href="" class="aui-col-5 text-center aui-padded-15">
										<i class="aui-iconfont aui-icon-cart aui-font-size-18"></i>
										<p class="aui-font-size-12">待付款</p>
									</a>
									<a href="" class="aui-col-5 text-center aui-padded-15">
										<i class="aui-iconfont aui-icon-cart aui-font-size-18"></i>
										<p class="aui-font-size-12">待付款</p>
									</a>
									<a href="" class="aui-col-5 text-center aui-padded-15">
										<i class="aui-iconfont aui-icon-cart aui-font-size-18"></i>
										<p class="aui-font-size-12">待付款</p>
									</a>
									<a href="" class="aui-col-5 text-center aui-padded-15 aui-border-l">
										<i class="aui-iconfont aui-icon-cart aui-font-size-18"></i>
										<p class="aui-font-size-12">待付款</p>
									</a>
								</div>
							</div>
						</div>
						<hr />

						<div id="2" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">“我的”页面-用户操作面板</h3>
							<div class="" style="width: 430px;">
								<!-- html结构如下 -->
								<div class="aui-content bg-dark">
									<a href="recharge.html" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">充值中心</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">我的收藏</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">我的关注</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">我的地址</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">我的优惠券</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">成为卖家</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">设 置</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">帮 助</div>
									</a>
									<a href="" class="aui-col-xs-4 text-center aui-padded-15 user-itemslist">
										<i class="font-size-30 aui-iconfont aui-icon-cart aui-margin-10"></i>
										<div class="aui-grid-label aui-font-size-14 aui-margin-5">关于我们</div>
									</a>
								</div>
							</div>
						</div>
						<hr />

						<div id="3" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">组件：新页面入口（条状入口）</h3>
							<div class="" style="width: 414px;">
								<h4 style="margin: 10px;">1）含按钮（充值列表）</h4>
								<!-- html结构如下 -->
								<div class="aui-content bg-dark">
									<div class="aui-content bg-white aui-padded-10 clearfix vertical-middle-2 aui-margin-b-5">
										<div class="aui-col-xs-6">
											<p class="aui-col-xs-6">
												<span class="aui-iconfont aui-icon-star aui-margin-5"></span>
												<span>60</span>
											</p>
											<p class="aui-col-xs-6">赠送 <span>0</span></p>
										</div>
										<div class="aui-col-xs-6 aui-text-right">
											<a href="" class="aui-label aui-btn-warning aui-btn-outlined aui-btn-sm btn-radius aui-padded-5 aui-padded-l-15 aui-padded-r-15">￥ <span class="">6</span></a>
										</div>
									</div>
									<div class="aui-content bg-white aui-padded-10 clearfix vertical-middle-2 aui-margin-b-5">
										<div class="aui-col-xs-6">
											<p class="aui-col-xs-6">
												<span class="aui-iconfont aui-icon-star aui-margin-5"></span>
												<span>320</span>
											</p>
											<p class="aui-col-xs-6">赠送 <span>32</span></p>
										</div>
										<div class="aui-col-xs-6 aui-text-right">
											<a href="" class="aui-label aui-btn-warning aui-btn-outlined aui-btn-sm btn-radius aui-padded-5 aui-padded-l-15 aui-padded-r-15">￥ <span class="">32</span></a>
										</div>
									</div>
									<div class="aui-content bg-white aui-padded-10 clearfix vertical-middle-2 aui-margin-b-5">
										<div class="aui-col-xs-6">
											<p class="aui-col-xs-6">
												<span class="aui-iconfont aui-icon-star aui-margin-5"></span>
												<span>680</span>
											</p>
											<p class="aui-col-xs-6">赠送 <span>68</span></p>
										</div>
										<div class="aui-col-xs-6 aui-text-right">
											<a href="" class="aui-label aui-btn-warning aui-btn-outlined aui-btn-sm btn-radius aui-padded-5 aui-padded-l-15 aui-padded-r-15">￥ <span class="">68</span></a>
										</div>
									</div>
									<div class="aui-content bg-white aui-padded-10 clearfix vertical-middle-2 aui-margin-b-5">
										<div class="aui-col-xs-6">
											<p class="aui-col-xs-6">
												<span class="aui-iconfont aui-icon-star aui-margin-5"></span>
												<span>1280</span>
											</p>
											<p class="aui-col-xs-6">赠送 <span>128</span></p>
										</div>
										<div class="aui-col-xs-6 aui-text-right">
											<a href="" class="aui-label aui-btn-warning aui-btn-outlined aui-btn-sm btn-radius aui-padded-5 aui-padded-l-15 aui-padded-r-15">￥ <span class="">128</span></a>
										</div>
									</div>
									<div class="aui-content bg-white aui-padded-10 clearfix vertical-middle-2 aui-margin-b-5">
										<div class="aui-col-xs-6">
											<p class="aui-col-xs-6">
												<span class="aui-iconfont aui-icon-star aui-margin-5"></span>
												<span>2980</span>
											</p>
											<p class="aui-col-xs-6">赠送 <span>298</span></p>
										</div>
										<div class="aui-col-xs-6 aui-text-right">
											<a href="" class="aui-label aui-btn-warning aui-btn-outlined aui-btn-sm btn-radius aui-padded-5 aui-padded-l-15 aui-padded-r-15">￥ <span class="">298</span></a>
										</div>
									</div>
								</div>

							</div>

							<div class="" style="width: 414px;">
								<h4 style="margin: 10px;">2）含箭头图标</h4>
								<!--框架原本封装-->
								<ul class="aui-list aui-list-in">
									<li class="aui-list-header">
										带有右侧箭头
									</li>
									<li class="aui-list-item aui-list-item-middle">
										<div class="aui-list-item-inner aui-list-item-arrow">
											Item1
										</div>
									</li>
									<li class="aui-list-item">
										<div class="aui-list-item-inner aui-list-item-arrow">
											Item2
										</div>
									</li>
									<li class="aui-list-item">
										<div class="aui-list-item-inner aui-list-item-arrow">
											Item3
										</div>
									</li>
								</ul>

								<!-- html结构如下 -->
								<div class="aui-content aui-margin-t-10 aui-margin-b-10 bg-white padding-ten clearfix">
									<a href="" class="vertical-justify-2">
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											<span>选择规格</span>
										</p>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>

								<div class="aui-content aui-margin-t-10 aui-margin-b-10 bg-white padding-ten clearfix">
									<a href="" class="vertical-justify-2">
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											<i class="aui-col-xs-1 aui-iconfont aui-icon-my aui-margin-l-5"></i>
											<span>个人资料</span>
										</p>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>

								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-justify-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10 aui-border-b">
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											<i class="aui-col-xs-1 aui-iconfont aui-icon-map aui-margin-l-5"></i>
											<span>地址管理</span>
										</p>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>
								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-justify-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10">
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											<i class="aui-col-xs-1 aui-iconfont aui-icon-trash aui-margin-l-5"></i>
											<span>清除缓存</span>
										</p>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>

								<div class="aui-content aui-margin-t-10 aui-margin-b-10 padding-ten clearfix aui-bg-default">
									<a href="" class="vertical-justify-2">
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											<i class="aui-col-xs-1 aui-iconfont aui-icon-location aui-margin-l-5"></i>
											<span>上海市</span>
										</p>
										<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
											点击切换地区
										</p>
									</a>
								</div>

								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-middle-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10 aui-border-b">
										<span class="aui-font-size-12">商家直播协议</span>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>
								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-middle-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10 aui-border-b">
										<span class="aui-font-size-12">商家入驻协议</span>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>
								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-middle-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10 aui-border-b">
										<span class="aui-font-size-12">普通会员特权</span>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>
								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-middle-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10 aui-border-b">
										<span class="aui-font-size-12">不知道怎么充值</span>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>
								<div class="aui-content bg-white clearfix  aui-margin-0">
									<a href="" class="vertical-middle-2 aui-margin-t-10 aui-margin-l-10 aui-padded-b-10 aui-padded-r-10">
										<span class="aui-font-size-12">成为卖家</span>
										<i class="aui-iconfont aui-icon-right float-right"></i>
									</a>
								</div>

								<!--框架原本封装的-->
								<div class="aui-content aui-margin-b-15">
									<ul class="aui-list aui-list-in">
										<li class="aui-list-header">带有图标、底线缩进</li>
										<li class="aui-list-item">
											<div class="aui-list-item-label-icon">
												<i class="aui-iconfont aui-icon-home"></i>
											</div>
											<div class="aui-list-item-inner">
												这是一个列表项
											</div>
										</li>
										<li class="aui-list-item">
											<div class="aui-list-item-label-icon">
												<i class="aui-iconfont aui-icon-edit"></i>
											</div>
											<div class="aui-list-item-inner">
												这是一个列表项
											</div>
										</li>
										<li class="aui-list-item">
											<div class="aui-list-item-label-icon">
												<i class="aui-iconfont aui-icon-camera"></i>
											</div>
											<div class="aui-list-item-inner">
												这是一个列表项
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<hr />

						<div id="4" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">页面下方弹出层按钮：</h3>
							<div class="" style="width:414px;">
								<!-- html结构如下 -->
								<a href="recharge.html" class="aui-btn aui-btn-danger">点击此查看</a>
							</div>
							<p>ps:也可点击下方页面中“￥289”按钮，即可查看弹出层效果。</p>
							<iframe src="recharge.html" height="736" width="414" style="border: 2px solid #999999;"></iframe>
						</div>
						<hr />

						<div id="5" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">列表：地址列表</h3>
							<div class="" style="width:414px;">
								<!-- html结构如下 -->
								<div class="aui-card-list">
									<div class="aui-card-list-header aui-padded-t-15">
										<div>收件人名字</div>
										<div>12312312345</div>
									</div>
									<div class="aui-card-list-content-padded aui-border-b aui-padded-b-15">
										<div>收件人详细地址</div>
									</div>
									<div class="aui-card-list-footer">
										<div class="aui-list-item">
											<div class="aui-list-item-inner">
												<label>
								                    	<input class="aui-radio" type="radio" name="radio"> 
								                    	<span>设为默认地址</span>
								                    </label>
											</div>
										</div>
										<div>
											<a href="" class=""> <i class="aui-iconfont aui-icon-trash aui-margin-5"></i>删除 </a>
											<a href=""> <i class="aui-iconfont aui-icon-pencil aui-margin-5"></i>编辑 </a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<hr />

						<div id="6" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">列表：我的收藏</h3>
							<div class="" style="width:414px;">
								<div class="aui-content aui-margin-b-15">
									<ul class="aui-list aui-media-list">
										<li class="aui-list-item">
											<div class="aui-media-list-item-inner">
												<div class="aui-list-item-media">
													<img options="bgcolor=#ccc&color=#ffffff&fsize=20&text=占位图" class="placeholder" />
												</div>
												<div class="aui-list-item-inner">
													<div class="aui-list-item-text aui-margin-b-5">
														<div class="aui-list-item-title">带有媒体的列表二</div>
														<div class="aui-list-item-right">08:00</div>
													</div>
													<div class="aui-list-item-text aui-margin-b-5 aui-font-size-12">
														这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
													</div>
													<div class="aui-info nopadding">
														<div class="aui-info-item">
															<img options="size=20x20&bgcolor=#ccc&color=#ffffff&fsize=12&text=占位图" class="placeholder aui-img-round" />
															<span class="aui-margin-l-5">￥<span>10000</span></span>
														</div>
														<div class="aui-info-item aui-btn-sm aui-btn-outlined aui-btn-danger btn-radius aui-font-size-12 aui-padded-r-10 aui-padded-l-10">取消收藏</div>
													</div>
												</div>
											</div>
										</li>
									</ul>
								</div>

								<ul class="aui-list aui-media-list bg-transparent">
									<li class="aui-padded-0 aui-list-item aui-margin-b-10 bg-white">
										<div class="aui-media-list-item-inner">
											<div class="aui-padded-10 vertical-center-1">
												<input class="aui-radio" type="radio" name="radio">
											</div>

											<div class="aui-list-item-media ">
												<img options="size=135x135&bgcolor=#ccc&color=#ffffff&fsize=20&text=占位图" class="placeholder" style="display: flex;" />
											</div>
											<div class="aui-list-item-inner">
												<div class="aui-list-item-text aui-margin-b-5">
													<div class="aui-list-item-title">带有媒体的列表二</div>
													<div class="aui-list-item-right">08:00</div>
												</div>
												<div class="aui-list-item-text aui-margin-b-5 aui-font-size-12">
													这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
												</div>
												<div class="aui-info nopadding">
													<div class="aui-info-item">
														<img options="size=20x20&bgcolor=#ccc&color=#ffffff&fsize=12&text=占位图" class="placeholder aui-img-round" />
														<span class="aui-margin-l-5">￥<span>10000</span></span>
													</div>
													<div class="aui-info-item aui-btn-sm aui-btn-outlined aui-btn-danger btn-radius aui-font-size-12 aui-padded-r-10 aui-padded-l-10">取消收藏</div>
												</div>
											</div>
										</div>
									</li>

									<li class="aui-padded-0 aui-list-item aui-margin-b-10 bg-white">
										<div class="aui-media-list-item-inner">
											<div class="aui-list-item-media">
												<img options="bgcolor=#ccc&color=#ffffff&fsize=20&text=占位图" class="placeholder" />
											</div>
											<div class="aui-list-item-inner">
												<div class="aui-list-item-text aui-margin-b-5">
													<div class="aui-list-item-title">带有媒体的列表二</div>
													<div class="aui-list-item-right">08:00</div>
												</div>
												<div class="aui-list-item-text aui-margin-b-5 aui-font-size-12">
													这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
												</div>
												<div class="aui-info nopadding">
													<div class="aui-info-item">
														<img options="size=20x20&bgcolor=#ccc&color=#ffffff&fsize=12&text=占位图" class="placeholder aui-img-round" />
														<span class="aui-margin-l-5">￥<span>10000</span></span>
													</div>
													<div class="aui-info-item aui-btn-sm aui-btn-outlined aui-btn-danger btn-radius aui-font-size-12 aui-padded-r-10 aui-padded-l-10">取消收藏</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<hr />

						<div id="7" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">列表：平台消息</h3>
							<h4 style="margin: 10px;margin-top: 20px;">1）订单消息</h4>
							<div class="" style="width:420px;">
								<div class="infomation aui-padded-15 bg-white" style="display:block;">
									<ul class="aui-list aui-media-list">
										<li class="aui-list-item aui-padded-l-0 ">
											<div class="aui-info aui-padded-b-0">
												<div class="aui-info-item">
													<span class="aui-margin-l-5">订单已签收</span>
												</div>
												<div class="aui-info-item">2015-07-14 10:31</div>
											</div>

											<div class="aui-media-list-item-inner aui-padded-b-5">
												<div class="aui-list-item-inner">
													<div class="aui-list-item-text aui-font-size-14">
														商品名称商品名称商品名称商品名称
													</div>
													<div class="aui-list-item-text aui-margin-10 aui-margin-l-0  aui-margin-b-0 aui-font-size-12">
														订单编号<span>2018041215521710922</span>
													</div>
												</div>
												<div class="aui-list-item-media aui-padded-r-0">
													<img options="bgcolor=#ccc&color=#ffffff&fsize=12&text=占位图" class="placeholder" />
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<h4 style="margin: 10px;margin-top: 20px;">2）系统消息</h4>
							<div class="" style="width:420px;">
								<div class="infomation aui-padded-15 bg-white" style="display:block;">
									<ul class="aui-list aui-media-list">
										<li class="aui-list-item aui-padded-0">
											<div class="aui-media-list-item-inner">
												<div class="aui-list-item-inner aui-padded-r-0">
													<p class="aui-margin-b-5">带有媒体的列表一</p>
													<p class="aui-list-item-text aui-margin-b-5 aui-font-size-12">
														这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
													</p>
													<p class="aui-font-size-12">2018-12-12 12:12:12</p>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<hr />

						<div id="8" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">列表：我的关注</h3>
							<div class="" style="width:414px;">
								<div class="aui-content aui-margin-b-15">
									<ul class="aui-list aui-media-list">
										<li class="aui-list-item">
											<div class="aui-media-list-item-inner">
												<div class="aui-list-item-media">
													<img options="bgcolor=#ccc&color=#ffffff&fsize=20&text=占位图" class="placeholder" />
												</div>
												<div class="aui-list-item-inner topBottom-justify">
													<div class="aui-list-item-text aui-margin-b-5">
														<div class="aui-list-item-title">商家名称</div>
													</div>
													<div class="aui-info nopadding">
														<span class="aui-margin-l-5">月销量：<span>10000</span></span>
														<div class="aui-info-item aui-btn-sm aui-btn-outlined aui-btn-danger btn-radius aui-font-size-12 aui-padded-r-10 aui-padded-l-10">取消关注</div>
													</div>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<hr />

						<div id="9" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">个人设置-头像设置</h3>
							<div class="" style="width:414px;">
								<div class="aui-content bg-dark aui-padded-r-10 aui-padded-l-10 aui-margin-b-10 aui-font-size-14 bg-white">
									<ul class="aui-list aui-media-list">
										<li class="aui-list-item aui-list-item-middle">
											<div class="aui-media-list-item-inner" onclick="selectDialog('text','修改头像','从相册上传','拍照','取消')">
												<div class="aui-list-item-inner">
													<div class="aui-list-item-text">头像</div>
												</div>
												<div class="aui-list-item-media" style="width: 3rem;">
													<img options="size=55x55bgcolor=#ccc&amp;color=#ffffff&amp;fsize=10&amp;text=55x55" class="aui-img-round placeholder">
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<hr />

						<div id="10" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">订单列表</h3>
							<div class="" style="width:414px;">

								<ul class="aui-list aui-media-list">
									<li class="aui-list-item aui-padded-l-0">
										<div class="aui-info aui-padded-10">
											<div class="aui-info-item">
												<img options="size=35x35&bgcolor=#ccc&color=#ffffff&fsize=12&text=35x35" class="placeholder" />
												<span class="aui-margin-l-5">商家名字商家名字</span>
											</div>
											<div class="aui-info-item">订单状态</div>
										</div>

										<div class="aui-media-list-item-inner aui-padded-l-10 bg-gray">
											<div class="aui-list-item-media">
												<img options="size=100x100&bgcolor=#ccc&color=#ffffff&fsize=16&text=100x100" class="placeholder" />
											</div>
											<div class="aui-list-item-inner">
												<div class="aui-list-item-text">
													商品名称商品名称商品名称
												</div>
												<div class="aui-list-item-text aui-margin-10 aui-margin-l-0  aui-margin-b-0 aui-font-size-12">
													<span>规格：<sapn>2018041215521710922</sapn></span>
												</div>
												<div class="aui-list-item-text aui-margin-10 aui-margin-l-0  aui-margin-b-0 aui-font-size-12">
													<span class="text-red">价格：￥<sapn>201802</sapn> 元</span>
													<span>数量：x<span>1</span></span>
												</div>
											</div>
										</div>
										<div class="aui-padded-10 aui-text-right aui-font-size-14">
											<span class="aui-text-right">共计<sapn>1</sapn>件商品</span>
											<span class="aui-text-right">合计：￥<sapn>201802</sapn> 元</span>
										</div>
									</li>
								</ul>

							</div>
						</div>
						<hr />

						<div id="11" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">意见反馈输入框</h3>
							<div class="" style="width:414px;">
								<!--start:内容区域-->
								<div class="aui-content aui-margin-15">
									<textarea id="feedbackTextarea" class="bg-white my-feedback" rows="15" maxlength="500o" placeholder="您留下的每个字都将帮助改善我们的产品，期待您的反馈（内容不少于15个字）"></textarea>
									<div class="feedback-fonts aui-text-right"> <span id="feedbackWords">0</span>/500 </div>
									<input class="aui-btn aui-btn-block aui-btn-info" type="button" value="确 定" />
								</div>
								<!--end:内容区域-->
								<script type="text/javascript">
									//监听textarea 内容的变化，并计算内容的长度
									window.onload = function() {
										function txtCount(el) {
											var val = el.value;
											var eLen = val.length;
											return eLen;
										}
										var el = document.getElementById('feedbackTextarea');
										el.addEventListener('input', function() {
											var len = txtCount(this); //   调用函数 
											document.getElementById('feedbackWords').innerHTML = len;
										});
										el.addEventListener('propertychange', function() { //兼容IE
											var len = txtCount(this); //   调用函数 
											document.getElementById('feedbackWords').innerHTML = len;
										});
									}
								</script>
							</div>
						</div>
						<hr />

						<div id="12" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">列表-全部删除</h3>
							<div class="" style="width:414px;height: 180px;">
								<footer class="aui-bar aui-bar-tab bg-white vertical-justify-2" id="footer" style="display: block;position:inherit;">
									<div class="aui-col-xs-8 aui-padded-10 vertical-left-1">
										<label class="aui-margin-l-5" onclick="allcheck_btn()" style="">
						            		<input id="allCheckBtn" class="aui-radio" type="checkbox" name="" checked="checked">
						            		全选
						            	</label>
									</div>
									<a class="aui-col-xs-4 aui-padded-5">
										<div class="aui-btn aui-btn-block aui-btn-danger aui-btn-sm"><span class="font-size-12"></span>全部删除</div>
									</a>
								</footer>
							</div>
						</div>
						<hr />

						<div id="13" style="margin: 40px 0;">
							<h3 style="margin: 10px;margin-top: 20px;">购物车商品列表-全部删除</h3>
							<div class="" style="width:414px;height: 180px;">
								<footer class="aui-bar aui-bar-tab clearfix" id="footer" style="position: relative;">
									<div class="aui-col-xs-12 clearfix" id="footer-prices">
										<div class="aui-col-xs-3 aui-padded-10 vertical-left-1 clearfix bg-white">
											<input id="allCheckBtn" class="aui-radio" type="checkbox" onclick="allcheck_btn()" />
											<p class="aui-margin-l-5">全选</p>
										</div>
										<div class="aui-col-xs-6 aui-padded-0 clearfix bg-white total-prices">
											<div class="aui-text-right overflow-hidden aui-padded-r-5 text-block vertical-center-1" style="font-size: 18px !important;">
												总计：<span class="text-red">￥<span id="prices">999,99.99999</span></span>
											</div>
											<p class="font-size-12 aui-text-center" style="font-size: 14px !important;">（不含运费）</p>
										</div>
										<a class="aui-col-xs-3 clearfix">
											<span class="aui-btn aui-btn-block" id="closeAll">结算</span>
											<span class="aui-btn aui-btn-block" id="deleteAll">全部删除</span>
										</a>
									</div>

									<div class="aui-col-xs-12 clearfix">
										<a href="index.html" class="aui-bar-tab-item" tapmode>
											<i class="aui-iconfont aui-icon-home"></i>
											<div class="aui-bar-tab-label">商城</div>
										</a>
										<a href="" class="aui-bar-tab-item" tapmode>
											<i class="aui-iconfont aui-icon-video"></i>
											<div class="aui-bar-tab-label">直播</div>
										</a>
										<a href="shopCart.html" class="aui-bar-tab-item aui-active" tapmode>
											<i class="aui-iconfont aui-icon-cart"></i>
											<div class="aui-bar-tab-label">购物车</div>
										</a>
										<a href="my.html" class="aui-bar-tab-item" tapmode>
											<i class="aui-iconfont aui-icon-my"></i>
											<div class="aui-bar-tab-label">我的</div>
										</a>
									</div>
								</footer>
								<div id="footer_holder"></div>
							</div>
						</div>
						<hr />

						<div id="14" style="margin: 40px 0;">
							<div class="" style="margin-top:60px;margin-bottom:50px;">
								<h3 style="margin-bottom:50px;">列表-购物车商品列表</h3>
								<iframe src="shopCart.html" height="736" width="414" style="overflow-y: scroll;border: none;"></iframe>
							</div>
						</div>
						<hr />
						
						<div id="15" style="margin: 40px 0;">
							<div class="" style="margin-top:20px;margin-bottom: 20px;width: 414px;">
								<h3 style="margin-bottom:50px;">首页搜索商品列表</h3>
								<!--start:内容区域-->
								<ul class="aui-list aui-media-list bg-transparent">
									<li class="aui-padded-0 aui-list-item aui-margin-b-10 bg-white">
										<div class="aui-media-list-item-inner">
											<div class="aui-padded-10 aui-padded-r-0 vertical-center-1 moreChecked" >
						                    	<input class="aui-radio radioList" type="checkbox" name="" > 
							                </div>
											
											<div class="aui-padded-10 vertical-center-1">
						                    	<img options="size=120x120&bgcolor=#ccc&color=#ffffff&fsize=20&text=120x120" class="placeholder"/>
							                </div>
							                
											<div class="aui-list-item-inner">
												<div class="aui-list-item-text aui-margin-b-5">
													<div class="aui-list-item-title">带有媒体的列表1</div>
												</div>
												<div class="aui-list-item-text aui-margin-b-5 aui-font-size-12">
													这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
												</div>
												
												<div>
													现价:￥<span>10000</span>
												</div>
												
												<div class="aui-info nopadding">
													<s class="aui-font-size-12 text-gray">原价：￥<span>9999,99</span></s>
													<span>
														<span>0</span>人购买
													</span>
												</div>
												
											</div>
										</div>
									</li>
								</ul>
								<!--end:内容区域-->
							</div>
						</div>
						<hr />

						<div id="16" style="margin: 40px 0;">
							<div class="" style="margin-top:60px;margin-bottom:50px;">
								<h3 style="margin-bottom:50px;">列表-购物车商品列表</h3>
								<iframe src="index-moreList.html" height="736" width="414" style="overflow-y: scroll;border: none;"></iframe>
							</div>
						</div>
						<hr />


					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="js/placeholder.min.js" type="text/javascript" charset="utf-8"></script>

</html>